<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE-edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>注册</title>
    <!-- Import style -->
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
    <script src="./static/element-plus/theme-chalk/display.css"></script>
  </head>
  <body>
    <div id="app">
      <el-row>
        <el-col :md="24" :lg="8"></el-col>
        <el-col :md="24" :lg="8">
          <h1>注册</h1>
          <el-form ref="form" :model="formData" :rules="rules" label-width="auto" style="max-width: 600px">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="formData.username" placeholder="至少4个字符" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="formData.password" type="password" placeholder="至少6个字符" show-password />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="formData.confirmPassword" type="password" placeholder="请再次输入密码" show-password />
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model.number="formData.age" placeholder="number" />
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-radio-group v-model="formData.gender">
                <el-radio value="男">男</el-radio>
                <el-radio value="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="兴趣爱好" prop="hobby">
              <el-checkbox-group v-model="formData.hobby">
                <el-checkbox value="阅读"> 阅读 </el-checkbox>
                <el-checkbox value="运动"> 运动 </el-checkbox>
                <el-checkbox value="旅行"> 旅行 </el-checkbox>
                <el-checkbox value="数码"> 数码 </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="职业" prop="job">
              <el-select v-model="formData.job" placeholder="please select your job">
                <el-option value="前端开发工程师">前端开发工程师</el-option>
                <el-option value="后端开发工程师">后端开发工程师</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="自我介绍" prop="selfIntro">
              <el-input
                v-model="formData.selfIntro"
                type="textarea"
                placeholder="请写一段话介绍简单介绍一下自己吧"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
              <el-button type="primary" @click="resetForm">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :md="24" :lg="8"></el-col>
      </el-row>
      <el-dialog v-model="dialogVisible" title="请确认注册信息" width="500">
        <p>用户名：{{formData.username}}</p>
        <p>年龄：{{formData.age}}</p>
        <p>性别：{{formData.gender}}</p>
        <p>兴趣爱好：{{formData.hobby}}</p>
        <p>职业：{{formData.job}}</p>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click="confirmRegister">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <script>
      var App = {
        data() {
          const validateUsername = (rule, value, callback) => {
            if (value.length < 4) {
              callback(new Error('用户名至少需要4个字符'));
            } else {
              callback();
            }
          };
          const validatePassword = (rule, value, callback) => {
            if (value.length < 6) {
              callback(new Error('密码至少需要6个字符'));
            } else {
              callback();
            }
          };
          const validateConfirmPassword = (rule, value, callback) => {
            if (value !== this.formData.password) {
              callback(new Error('两次输入的密码不一致'));
            } else {
              callback();
            }
          };
          
          return {
            formData: {
              username: "",
              password: "",
              confirmPassword: "",
              age: null,
              gender: "",
              hobby: [],
              job: "",
              selfIntro: "",
            },
            dialogVisible: false,
            rules: {
              username: [
                { required: true, message: '请输入用户名', trigger: 'blur' },
                { validator: validateUsername, trigger: 'blur' }
              ],
              password: [
                { required: true, message: '请输入密码', trigger: 'blur' },
                { validator: validatePassword, trigger: 'blur' }
              ],
              confirmPassword: [
                { required: true, message: '请确认密码', trigger: 'blur' },
                { validator: validateConfirmPassword, trigger: 'blur' }
              ],
              age: [
                { type: 'number', message: '年龄必须为数字', trigger: 'blur' }
              ],
              gender: [
                { required: true, message: '请选择性别', trigger: 'change' }
              ]
            }
          };
        },
        watch: {
          formData: {
            handler(newUser, oldUser) {
              console.log("用户信息发生变化：");
              console.log("新用户信息", newUser);
              console.log("旧用户信息", oldUser);
            },
            deep: true,
          }
        },
        methods: {
          onSubmit() {
            this.$refs.form.validate((valid) => {
              if (valid) {
                this.dialogVisible = true;
              } else {
                return false;
              }
            });
          },
          confirmRegister() {
            alert("注册成功!");
            this.dialogVisible = false;
          },
          resetForm() {
            this.$refs.form.resetFields();
            this.dialogVisible = false;
          },
        },
      };
      Vue.createApp(App).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>